import { FC, useEffect, useState } from "react"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"
// import { TableColumnType } from "antd"
// import dynamicComponent from "./dynamicImport"

const ProxyLevelSelect: FC<{ isMultiple?: boolean; placeholder?: string; disabled?: boolean }> = ({
	isMultiple = false,
	placeholder,
	disabled = false
}) => {
	const { newFormat } = useLocale()
	const [options, setOptions] = useState<{ label: string; value: number }[]>([])
	const { generalHttp, loading } = useApi()
	const getOptions = async () => {
		const [err, data] = await generalHttp("/proxy/level/nameList", {})
		if (!err)
			setOptions(
				(data as { id: number; levelName: string }[]).map(item => {
					return { label: String(item.id), value: item.id }
				})
			)
	}
	useEffect(() => {
		getOptions()
	}, [])
	return (
		<SFormItem name="proxyLevel" label={newFormat("label.proxyLevel")}>
			<StyleSelect
				disabled={disabled}
				loading={loading}
				options={options}
				placeholder={placeholder ?? newFormat({ id: "label.select_all" })}
				allowClear
				mode={isMultiple ? "multiple" : undefined}
				maxTagCount={1}
			/>
		</SFormItem>
	)
}

export default ProxyLevelSelect
